<template>
	<view class="container">
		<view class="top">
			<view>
				<view class="tea">奶茶点餐></view>
				<view class="content">距离您180m</view>
			</view>
			<image src="../../static/logo1.png"></image>
		</view>
		<view class="swiper">
			{{swiperList}}
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="h100">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/pb1.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/pb2.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/pb3.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="list">
			<view class="left-list">
				<view class="css">
					<image src="../../static/t1.png" mode=""></image>
					<view class="">
						醇香奶茶
					</view>
				</view>
				<view>
					<image src="../../static/t2.png" mode=""></image>
					<view class="">
						鲜牛乳
					</view>
				</view>
				<view>
					<image src="../../static/t3.png" mode=""></image>
					<view class="">
						四级鲜果茶
					</view>
				</view>
				<view>
					<image src="../../static/t4.png" mode=""></image>
					<view class="">
						乳酸菌
					</view>
				</view>
				<view>
					<image src="../../static/t5.png" mode=""></image>
					<view class="">
						加料2
					</view>
				</view>
				<view>
					<image src="../../static/t6.png" mode=""></image>
					<view class="">
						花香轻乳茶
					</view>
				</view>

			</view>
			<view class="right-list">
				<view>
					<image class="photo" src="../../static/p1.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">鸭屎香大菊茶</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									16
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
				<view>
					<image class="photo" src="../../static/p2.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">红豆麻薯双拼</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									18
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
				<view>
					<image class="photo" src="../../static/p3.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">招牌芋圆奶茶</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									16
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
				<view>
					<image class="photo" src="../../static/p4.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">芋泥芒果奶昔</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									19
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
				<view>
					<image class="photo" src="../../static/p5.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">满杯烧仙草</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									20
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
				<view>
					<image class="photo" src="../../static/p6.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">鸭屎香大菊茶</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									16
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
				<view>
					<image class="photo" src="../../static/p7.png" mode=""></image>
					<view style="margin-left: 25rpx;margin-right:25rpx;width:325rpx">
						<view class="title">鸭屎香大菊茶</view>
						<view class="number">（大杯）1杯</view>
						<view style="display: flex;justify-content: space-between;width: 100%;">
							<view>
								￥
								<text class="price">
									16
								</text>起
							</view>
							<image class="cart" src="../../static/cart.png" mode="" @click="addCart"></image>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0
			}
		},
		// onLoad() {
		// 	this.getSwiperImageList()
		// },
		methods: {
			// 	getSwiperImageList() {
			// 		uni.request({
			// 			url: "http://47.96.80.123:8000/product/queryProductByType?id=1",
			// 			success(res) => {
			// 				this.swiperList = res.data.data
			// 			}
			// 		})
			// 	}
			// }

		},
		addCart() {
			console.log("购物车")
		}
	}
</script>

<style>
	.top {
		height: 10%;
		/* background: skyblue; */
		display: flex;
		justify-content: space-between;
		padding: 15px;
		box-sizing: border-box;
		align-items: center;
	}

	.top image {
		width: 200rpx;
		height: 120rpx;
	}

	.swiper {
		height: 30%;
		/* background: pink; */
	}

	.list {
		height: 60%;
		/* background: #ccc; */
	}

	.tea {
		font-weight: bold;
		color: orange;
		font-size: 50rpx;

	}

	.content {
		color: #ccc;
		font-size: 28rpx;
	}

	.h100 {
		height: 100%;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		height: 100%;
	}

	.list {
		display: flex;
		justify-content: space-between;
	}

	.list .left-list {
		/* background-color: red; */
		height: 100%;
		width: 170rpx;
	}

	.left-list image {
		width: 80rpx;
		height: 80rpx;
	}

	.left-list view {
		text-align: center;
		/* background: red; */
		font-weight: bold;
		font-size: 30rpx;

	}

	.left-list>view {
		background: #f5f5f5;
		height: 150rpx;
		padding: 10rpx;
		box-sizing: border-box;

	}

	.list .right-list {
		/* background-color: whitesmoke; */
		height: 100%;
		width: 555rpx;
		overflow: auto;
	}

	.css {
		background: #fff;
		color: orange;
	}

	.photo {
		width: 200rpx;
		height: 200rpx;
	}

	.cart {
		width: 55rpx;
		height: 55rpx;
	}

	.right-list>view {
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
		margin-bottom: 25rpx;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.number {
		font-size: 32rpx;
		color: #ccc;
		line-height: 60rpx;
	}

	.price {
		font-size: 38rpx;
		color: orange;
		display: inline-block;
		font-weight: bold;
	}
</style>